<template>
  <div class="wrapper">
    <ul class="list" v-if="list.length > 0">
      <template v-for="(item, index) in list">
        <li
          class="list-item"
          :key="index"
          @click="handleMerchant(item)"
        >
          <div class="image" v-if="item.descImage && item.descImage[0] && item.descImage[0].image">
            <img v-lazy="item.descImage[0].image.thumbnail_path" />
          </div>
          <div class="text">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </template>
    </ul>
    <div class="nothing" v-else>暂无相关商家...</div>
  </div>
</template>

<script>
// 首页商家
import api from '@/api'
import base64 from '@/util/base64'
export default {
  data() {
    return {
      list: [],
    }
  },
  methods: {
    fetch() {
      api.Supplier.listAll({ category_id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list
      })
    },
    handleMerchant(item) {
      this.$router.push(`/product/merchant-product/${item.id}`)
    }
  },
  activated() {
    // this.fetch()
  },
  created() {
    this.fetch()
  }
}
</script>

<style scoped lang="stylus">
.wrapper
  .nothing
    padding-top 100px
  .list
    display flex
    flex-wrap wrap
    justify-content space-between
    margin 10px 0
    .list-item
      box-sizing border-box
      width 48%
      background white
      padding 10px
      border-radius 10px
      display flex
      flex-direction column
      align-items start
      line-height 1.2
      font-size 14px
      .text
        font-weight 700
        margin 10px 0
      .desc
        color #999
</style>
